<template>
  <div class="cascader">
    <!-- Cascader 级联选择 -->
    <a-cascader
      :field-names="Fie"
      :options="options"
      :show-search="{ filter }"
      :placeholder="Placeholder"
      @change="onChange"
    />
  </div>
</template>
<script>
module.exports = {
  data() {
    return {};
  },
  methods: {
     //Cascader 级联选择
       onChange(value, selectedOptions) {
      let params = { value, selectedOptions }
      console.log(params)
      this.$emit('cha',params)
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    }, 
  },
  props: {
    //Cascader 级联选择
    //默认提示
    Placeholder: {
      type: String,
      default: "Please select",
    },
    //配置数据字段
    Fie: {
      type: Object,
      default: () => ({ label: "name", value: "code", children: "items" }),
    },
    //数据格式
    options: {
      type: Array,
      default: () => [
        {
          code: "zhejiang",
          name: "Zhejiang",
          items: [
            {
              code: "hangzhou",
              name: "Hangzhou",
              items: [
                {
                  code: "xihu",
                  name: "West Lake",
                },
              ],
            },
          ],
        },
        {
          code: "jiangsu",
          name: "Jiangsu",
          items: [
            {
              code: "nanjing",
              name: "Nanjing",
              items: [
                {
                  code: "zhonghuamen",
                  name: "Zhong Hua Men",
                },
              ],
            },
          ],
        },
      ],
    },
  },
};
</script>